/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/



import { DownOutlined } from '@ant-design/icons';
import { Row, Col } from 'antd';
import classNames from 'classnames';
import React, { useState } from 'react';
import styles from './index.less';
interface MethodItemProps {
  SOAData: any;
}
const SOATable: React.FC<MethodItemProps> = (props) => {
  const { SOAData } = props;

  // 为每一项设置默认不展开
  const [showList, setShowList] = useState<boolean[]>(Array(SOAData.length).fill(false));

  // 根据index设置每一项展开关闭
  const handleClick = (index: number) => {
    setShowList((prevShowList) => {
      const newShowList = [...prevShowList];
      newShowList[index] = !prevShowList[index];
      return newShowList;
    });
  };

  return (
    <div className={classNames(styles.tableBox)}>
      {!!SOAData &&
        SOAData.map((item: any, index: number) => {
          const isExpanded = showList[index];//是否展开
          return (
            <ul key={index}>
              <li>
                <div
                  className={`${styles.lineBox} flex-row-mid`}
                  onClick={() => handleClick(index)}
                >
                  <div className={`${styles.arrowBox}`}>
                    <DownOutlined
                      className={` ${styles.animation} ${isExpanded ? styles.active : ''
                        }`}
                    />
                  </div>
                  <div className={`${styles.rightBox1}`}>
                      <Row className={styles.serviceTitle}>
                        <Col className={styles.serviceTitle2} flex={1}>
                          <div>服务名称</div>
                          <div className={styles.mt4}>{item.serviceName}</div>
                        </Col>
                        <Col className={styles.serviceTitle2} flex={1}>
                          <div>服务ID</div>
                          <div className={styles.mt4}>{item.serviceId}</div>
                        </Col>
                        <Col className={styles.serviceTitle2} flex={1}>
                          <div>接口名</div>
                          <div className={styles.mt4}>{item.methodName}</div>
                        </Col>
                        <Col className={styles.serviceTitle2} flex={1}>
                          <div>接口版本号</div>
                          <div className={styles.mt4}>{item.methodMinorVersion}</div>
                        </Col>
                        <Col className={styles.serviceTitle2} flex={1}>
                          <div>调用方式</div>
                          <div className={styles.mt4}>{item.type}</div>
                        </Col>
                      </Row>
                      {/* <div className={`${styles.tdBox}`}>服务名称：{item.serviceName}</div>
                      <div className={`${styles.tdBox}`}>服务ID：{item.serviceId}</div>
                      <div className={`${styles.tdBox}`}>服务版本号：{item.serviceMinorVersion}</div>
                      <div className={`${styles.tdBox}`}>接口名：{item.methodName}</div>
                      <div className={`${styles.tdBox}`}>接口版本号：{item.methodMinorVersion}</div> */}
                      {/* <div className={`${styles.tdBox}`}>EventID：{item.eventId}</div> */}
                      {/* <div className={`${styles.tdBox}`}>调用方法：{item.type}</div> */}
                      {/* <div className={`${styles.tdBox}`}>GroupID：{item.groupId}</div> */}
                  </div>
                </div>
                <div
                  style={{
                    display: isExpanded ? 'block' : 'none',
                    alignItems:'center'
                  }}
                >
                  {item.args.filter((element: any) => element.direct == 'IN').length != 0 ? (
                    <div className={`${styles.lineBox2} flex-row-mid`}>
                      <div className={`${styles.leftTit}`}>输入</div>
                      <ul className={`${styles.rightBox}`}>
                        {item.args
                          .filter((element: any) => element.direct == 'IN')
                          .map((itemData: any) => {
                            return (
                              // <li key={itemData.paramId} className="flex-row-mid">
                              //   {itemData.bindArgName != null ? (
                              //     <div className={`${styles.tdBox2}`}>
                              //       绑定参数: {itemData.bindArgName}
                              //     </div>
                              //   ) : (
                              //     <></>
                              //   )}
                              //   <div className={`${styles.tdBox2}`}>参数名称: {itemData.name}</div>
                              //   <div className={`${styles.tdBox2}`}>
                              //     数据类型: {itemData.dataType}
                              //   </div>
                              //   {/* <div className={`${styles.tdBox2}`}>Value: {itemData.value}</div> */}
                              // </li>
                              <Row className={styles.row} key={itemData.paramId}>
                                {itemData.bindArgName != null ? (
                                 <Col className={styles.col}>
                                   绑定参数: {itemData.bindArgName}
                                 </Col>
                                ) : (
                                 <></>
                                )}
                                <Col className={styles.col}>
                                  参数名称: {itemData.name}
                                </Col>
                                <Col className={styles.col}>
                                  数据类型: {itemData.dataType}
                                </Col>
                                <Col className={styles.col}>
                                  Value: {itemData.value}
                                </Col>
                              </Row>
                            );
                          })}
                      </ul>
                    </div>
                  ) : (
                    <></>
                  )}
                  {item.args.filter((element: any) => element.direct == 'OUT').length != 0 ? (
                    <div className={`${styles.lineBox2} flex-row-mid`}>
                      <div className={`${styles.leftTit}`}>输出</div>
                      <ul className={`${styles.rightBox}`}>
                        {item.args
                          .filter((element: any) => element.direct == 'OUT')
                          .map((itemData: any) => {
                            return (
                              // <li key={itemData.paramId} className="flex-row-mid">
                              //   {itemData.bindArgName != null ? (
                              //     <div className={`${styles.tdBox2}`}>
                              //       绑定参数: {itemData.bindArgName}
                              //     </div>
                              //   ) : (
                              //     <></>
                              //   )}
                              //   <div className={`${styles.tdBox2}`}>参数名称: {itemData.name}</div>
                              //   <div className={`${styles.tdBox2}`}>
                              //     数据类型: {itemData.dataType}
                              //   </div>
                              //   {/* <div className={`${styles.tdBox2}`}>Value: {itemData.value}</div> */}
                              // </li>
                              <Row className={styles.row} key={itemData.paramId}>
                                {itemData.bindArgName != null ? (
                                 <Col className={styles.col}>
                                   绑定参数: {itemData.bindArgName}
                                 </Col>
                                ) : (
                                 <></>
                                )}
                                <Col className={styles.col}>
                                  参数名称: {itemData.name}
                                </Col>
                                <Col className={styles.col}>
                                  数据类型: {itemData.dataType}
                                </Col>
                                {/* <Col className={styles.col}>
                                  Value: {itemData.value}
                                </Col> */}
                              </Row>
                            );
                          })}
                      </ul>
                    </div>
                  ) : (
                    <></>
                  )}
                  {item.args.filter((element: any) => element.direct == null).length != 0 ? (
                    <div className={`${styles.lineBox2} flex-row-mid`}>
                      <div className={`${styles.leftTit}`}>其他</div>
                      <ul className={`${styles.rightBox}`}>
                        {item.args
                          .filter((element: any) => element.direct == null)
                          .map((itemData: any) => {
                            return (
                              // <li key={itemData.paramId} className="flex-row-mid">
                              //   {itemData.bindArgName != null ? (
                              //     <div className={`${styles.tdBox2}`}>
                              //       绑定参数: {itemData.bindArgName}
                              //     </div>
                              //   ) : (
                              //     <></>
                              //   )}
                              //   <div className={`${styles.tdBox2}`}>参数名称: {itemData.name}</div>
                              //   <div className={`${styles.tdBox2}`}>
                              //     数据类型: {itemData.dataType}
                              //   </div>
                              //   {/* <div className={`${styles.tdBox2}`}>Value: {itemData.value}</div> */}
                              // </li>
                              <Row className={styles.row} key={itemData.paramId}>
                                {itemData.bindArgName != null ? (
                                 <Col className={styles.col}>
                                   绑定参数: {itemData.bindArgName}
                                 </Col>
                                ) : (
                                 <></>
                                )}
                                <Col className={styles.col}>
                                  参数名称: {itemData.name}
                                </Col>
                                <Col className={styles.col}>
                                  数据类型: {itemData.dataType}
                                </Col>
                                {/* <Col className={styles.col}>
                                  Value: {itemData.value}
                                </Col> */}
                              </Row>
                            );
                          })}
                      </ul>
                    </div>
                  ) : (
                    <></>
                  )}
                </div>
              </li>
            </ul>
          );
        })}
    </div>
  );
};

export default SOATable;
